<!--提供方管理页面-->
<style>
.overview-reports {
    padding: 18px 16px;
}
 .overview-reports .bg-purple {
     background: #fff;
     border-right: 1px solid #ccc;
 }
 .overview-reports .bg-purple .count {
     font-size: 24px;
     color: #333333;
 }
 .overview-reports  .section-one {
     border: 1px solid #ccc;
 }
 .overview-reports  .title {
     font-size: 18px;
     color: #333333;
     background: #e6e6e6;
     height: 48px;
     padding-left: 20px;
     line-height: 48px;
 }
</style>
<template>
    <div class="overview-reports">
    <el-row class="section-one">
        <el-row class="title">关键数据</el-row>
        <el-row  class="toolbar total marginTop30px" style="margin-bottom:0">
            <el-col :span="4"><div class="grid-content bg-purple">
               <div class="count"> {{allInvoLogNum}}</div> 
               <div>应用市场总数</div>               
               </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
                <div  class="count"> {{allProviderNum}}</div>
                <div>开发商总数</div>            
               </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
                <div  class="count">{{allSuccInvoNum}}</div>
                <div>应用总数</div>
               </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
                 <div  class="count">{{allServiceNum}}</div>
                 <div>本月新增应用</div>
                </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
                 <div  class="count">{{todayInvoLogNum}}</div>
                 <div>本周新增应用</div>
                </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
                <div  class="count">{{allRequesterNum}}</div>
                <div>本日新增应用</div>
               </div></el-col>        
          </el-row>
        </el-row>  
        <el-row class="marginTop30px">
            <el-row class="title">分类统计</el-row>
            <el-row>
                <el-col :span="8">
                    <div id="ser_countByLoction_chart" :style="{width: '300px', height: '320px'}"></div>
                </el-col>
                <el-col :span="8">
                    <div id="req_countByOrganization_char" :style="{width: '300px', height: '320px'}"></div>
                </el-col>
                <el-col :span="8">
                    <div id="business_char" :style="{width: '300px', height: '320px'}"></div>
                </el-col>
            </el-row>
        </el-row>     
        <el-row class="marginTop30px">
            <el-row class="title">下载TOP10</el-row>
            <el-row>
                <el-col :span="24">
                    <div id="day_request_chart" :style="{width: '100%', height: '300px'}"></div>
                </el-col>
               
            </el-row>
        </el-row>
         <el-row class="marginTop30px">
            <el-row class="title">启动TOP10</el-row>
            <el-row>           
                <el-col :span="24">
                    <div id="day_service_chart" :style="{width: '100%', height: '300px'}"></div>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
    import {invoLog_countByCondition, pro_countByCondition, req_countByCondition, ser_countByCondition,ser_countByLoction,req_countByOrganization,req_monthlyRequesterCount,req_dayRequesterCount,req_dayServiceCount} from '../api/api.js';
    import utils from '../api/utils.js';
    export default {
        data() {
            return {
                allServiceNum:0,// 所有接口总数
                allInvoLogNum:0,// 所有调用日志数量
                allRequesterNum:0,// 所有请求者数量
                allProviderNum:0,// 所有提供者数量
                todayInvoLogNum:0,// 今日调用日志数量
                allSuccInvoNum:0,// 所有调用成功的数量
                allFailInvoNum:0,// 所有调用失败的数量
                todaySuccInvoNum:0,// 今日成功次数
                todayFailInvoNum:0,// 今日失败次数

                countByLoctionData:[],
            };
        },
        methods: {
            formatCommDatas(row, column){
                return utils.formatCommDatas(row,column);
            },
            get_ser_countByLoction_list(){
                let params = {
					pageNum: 1,
					pageSize: 100
				};
				//NProgress.start();
				ser_countByLoction(params).then(function(result){
                    this.countByLoctionData = result.data.list;
                    this.drawLine();
				}.bind(this)).catch(function (error) {
					console.log(error);
				}.bind(this));
            },
            drawLine(){

              let business_char=this.$echarts.init(document.getElementById('business_char'));
                  business_char.setOption({
                                title : {
                                    text: '按业务',
                                    top:'30',                      
                                    x:'center',
                                    textStyle:{
                                        color:'#666666',
                                        fontWeight:'normal'
                                    }
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'horizontal',
                                    bottom:'1',
                                    data: ['移动专业应用','移动综合应用','移动互联网应用','基础共性应用']
                                },
                                 color: ['#5b9bd5','#ed7e31','#a5a5a5','#fabe32','#3b6ec3','#71ae44'],
                                series : [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius : '55%',
                                        center: ['50%', '60%'],
                                        data:[
                                            {value:1548, name:'移动专业应用'},
                                            {value:335, name:'移动综合应用'},
                                            {value:310, name:'移动互联网应用'},
                                            {value:234, name:'基础共性应用'},
                                           
                                           
                                        ],
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                show: true,
                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            });



                let data_classify = [];
                if(this.countByLoctionData.length>0){
                    this.countByLoctionData.forEach(obj => {
                        data_classify.push({value:obj.serviceSum,name:obj.loction});
                    });
                }
                // 基于准备好的dom，初始化echarts实例
                let ser_countByLoction_chart = this.$echarts.init(document.getElementById('ser_countByLoction_chart'))
                // 绘制图表
                ser_countByLoction_chart.setOption({
                    title:{
                            text: '按系统',
                            top:'30',                      
                            x:'center',
                            textStyle:{
                                color:'#666666',
                                fontWeight:'normal'
                            }
                            },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                                orient: 'horizontal',
                                bottom:'1',
                                data: ['广东省应用市场','广州市应用市场','佛山市应用市场','深圳市应用市场']
                            },
                    calculable : true,
                    series : [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                          //  data:data_classify
                            data:[ {value:1548, name:'广东省应用市场'},
                                    {value:335, name:'广州市应用市场'},                              
                                    {value:234, name:'佛山市应用市场'},
                                    {value:100, name:'深圳市应用市场'},
                                    ],
                            label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },        
                        }
                    ],
                     color: ['#5b9bd5','#ed7e31','#a5a5a5','#fabe32','#3b6ec3','#71ae44'],
                });

                let data_request = [];
                let params = {
					pageNum: 1,
					pageSize: 100
				};
				//NProgress.start();
				req_countByOrganization(params).then(function(result){
                    result.data.list.forEach(obj => {
                        data_request.push({value:obj.organizationSum,name:obj.organization});

                        let req_countByOrganization_char = this.$echarts.init(document.getElementById('req_countByOrganization_char'))
                        // 绘制图表
                        req_countByOrganization_char.setOption({
                            title:{
                                    text: '按业务',
                                    top:'30',                      
                                    x:'center',
                                    textStyle:{
                                        color:'#666666',
                                        fontWeight:'normal'
                                    }
                                },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'horizontal',
                                bottom:'1',
                                data:['| 类应用','|| 类应用','||| 类应用',]
                            },
                            calculable : true,
                            series : [
                                {
                                    name:'访问来源',
                                    type:'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                   // data:data_request
                                    data:[
                                            {value:1548, name:'| 类应用'},
                                            {value:335, name:'|| 类应用'},                              
                                            {value:234, name:'||| 类应用'}],
                                    label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },        
                                }
                            ],
                            color: ['#5b9bd5','#ed7e31','#a5a5a5','#fabe32','#3b6ec3','#71ae44'],
                        });
                    });
				}.bind(this)).catch(function (error) {
					console.log(error);
                }.bind(this));

            
                //重新修改参数配置
                params = {
                    pageNum: 1,
                    pageSize: 5,
                    type:1

                };
                //请求方统计
                req_dayRequesterCount(params).then(function(result){
                    let Byte = [];
                    let typeName = [];
                    let par = 0;
                    result.data.list.forEach(obj => {
                        Byte.push(obj.interfaceByte);
                        typeName.push(obj.typeName) ;
                        if(par < obj.interfaceByte){
                            par = obj.interfaceByte;
                        }
                    });

                    let month_chart = this.$echarts.init(document.getElementById('day_request_chart'))

                    // 绘制图表
                    month_chart.setOption({
                        title: {
                            text: ''
                        },
                        legend: {
                            data: ['单位：次']
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis:[
                                {
                                    type: 'category',
                                    data:['巡逻签到', '移动云搜', '日常待办', '情报推送', '值班考勤', '工作文档', '日历'],
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    splitLine:{show:false},
                                }
                            ],
                       yAxis:[
                            {
                                type : 'value',
                                splitLine:{show:false},
                            }
                            ],
                        series: [
                            {
                                name:'下载',
                                type:'bar',
                                barWidth: '20%',
                                data:[1500, 152, 500, 334, 690, 530, 220],
                                itemStyle: {   
                                normal:{  
                    　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params){
                                        var colorList = ['#7fc1fc','#8ac6fc','#98ccfa','#9ed0fb',];
                                        return colorList[params.dataIndex];
                                    }
                                },
                            //鼠标悬停时：
                                emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            }

                        ],
                        color: ['#33CCFF']
                    });

                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));

                //重新修改参数配置
                params = {
                    pageNum: 1,
                    pageSize: 5,
                    type:2

                };
                //服务方统计
                req_dayServiceCount(params).then(function(result){


                    let Byte = [];
                    let typeName = [];
                    let par = 0;
                    result.data.list.forEach(obj => {
                        Byte.push(obj.interfaceByte);
                        typeName.push(obj.typeName) ;
                        if(par < obj.interfaceByte){
                            par = obj.interfaceByte;
                        }
                    });

                    let month_chart = this.$echarts.init(document.getElementById('day_service_chart'))
                    // 绘制图表
                    month_chart.setOption({
                        title: {
                            text: ''
                        },
                        legend: {
                            data: ['单位：次']
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis:[
                            {
                                type: 'category',
                                data:['巡逻签到', '移动云搜', '日常待办', '情报推送', '值班考勤', '工作文档', '日历'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                splitLine:{show:false},
                            }
                        ],
                        yAxis:[
                            {
                                type : 'value',
                                splitLine:{show:false},
                            }
                            ],
                        series: [
                            {
                                name:'启动',
                                type:'bar',
                                barWidth: '20%',
                                data:[1000, 52, 200, 334, 390, 330, 220],
                                itemStyle: {   
                                    normal:{  
                        　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params){
                                            var colorList = ['#4bd396','#55e6a5','#70efb6','#7ef8c1','#95fbcd'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                //鼠标悬停时：
                                    emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                    },
                            }

                        ],
                        color: ['#33CCFF']
                    });
                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));
            }
        },
        computed: {

        },
        created() {
            let _this = this;

            ser_countByCondition({}).then(res => {// 所有接口总数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allServiceNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            pro_countByCondition({}).then(res => {// 所有提供者数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allProviderNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            req_countByCondition({}).then(res => {// 所有请求者数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allRequesterNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({}).then(res => {// 所有调用日志数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allInvoLogNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日调用日志数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todayInvoLogNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({"resultStatus":1}).then(res => {// 总成功调用次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allSuccInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":0}).then(res => {// 总失败调用次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allFailInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":1,"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日成功次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todaySuccInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":0,"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日失败次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todayFailInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });
        },
        mounted(){
            this.get_ser_countByLoction_list();
        }

    };
</script>
 <style>
    .thisBody{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .grid-content {
        margin-bottom: 20px;
        min-height: 36px;
    }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .total{
    /* margin-left: 120px !important; */
    text-align: center;
    line-height: 40px;
  }
</style>